<template>
	<view>
		<!-- F1:路径导航(面包屑) -->
		<xzBreadcrumb :paths="pathList"></xzBreadcrumb>
		<!-- F2:图片轮播 -->
		<swiper indicator-dots :autoplay="true" :interval="3000" :duration="1000" style="height: 750rpx;">
			<swiper-item v-for="{pid,md} in product.picList" :key="pid">
				<view class="swiper-item">
					<image :src="base+md" mode="widthFix" style="width: 750rpx;"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- F3:商品标题详情 -->
		<text>{{product.title}}</text>
		<text>{{product.subtitle}}</text>
		<view class="">
			<text>学员售价:￥{{product.price}}</text>
			<text>服务承诺:{{product.promise}}</text>
		</view>
		<!-- F4:规格列表 -->
		<view class="">
			<text>规格:</text>
			<view class="">
				<uni-tag v-for="{lid,spec} in family.laptopList" :key="lid" :text="spec"
					:type="lid===product.lid?'primary':'default'" @click="goToDetails(lid)" inverted></uni-tag>
			</view>
		</view>
		<!-- F5:加入购物车 -->
		<view class="">
			<text>数量:{{buyCount}}</text>
			<uni-number-box background="#0aa1ed" color="#fff" :min="1" :max="9" v-model="buyCount"></uni-number-box>
		</view>
		<!-- F6:为您推荐 -->
		<uni-card title="为您推荐" isFull>
			<scroll-view scroll-x>
				<view class="suggest-list">
					<view class="suggest">
						<image src="https://web.codeboy.com/xuezi/img/product_detail/product_detail_1.png"
							mode="widthFix"></image>
						<text>戴尔(DELL)魔方15MF Pro-R2505TSS灵</text>
					</view>
					<view class="suggest">
						<image src="https://web.codeboy.com/xuezi/img/product_detail/product_detail_2.png"
							mode="widthFix"></image>
						<text>联想(Lenovo) YOGA900 (YOGA4 PRO)多彩版</text>
					</view>
					<view class="suggest">
						<image src="https://web.codeboy.com/xuezi/img/product_detail/product_detail_3.png"
							mode="widthFix"></image>
						<text>ThinkPad New S2 (20GUA00QCD)13.3英寸超霸</text>
					</view>
					<view class="suggest">
						<image src="https://web.codeboy.com/xuezi/img/product_detail/product_detail_4.png"
							mode="widthFix"></image>
						<text>戴尔 DELL燃7000 R1605S 超霸</text>
					</view>
				</view>
			</scroll-view>
		</uni-card>
		<!-- F7:商品详细介绍 -->
		<uni-card title="商品详情">
			<!-- nodes:节点列表(一个HTML元素为一个"node) -->
			<rich-text :nodes="product.details"></rich-text>
		</uni-card>
		<view class="f75"></view>
		<!-- F8:加入购物车(固定定位在页面底部) -->
		<view class="f8">
			<uni-goods-nav :fill="true" :options="options" :button-group="btnGroup" @click="doOptionsClick"
				@buttonClick="doBtnGroupClick"></uni-goods-nav>
		</view>
	</view>
</template>

<script>
	import {
		base,
		cartAdd,
		productDetails
	} from '../../service'
	export default {
		async onLoad({
			pid
		}) {
			//读取上一个页面传递过来的路由参数 -- 要查询的商品编号
			console.log(pid)
			//向服务器发起异步请求,获取该商品的详情
			if (!pid) {
				//如果当前处于开发测试阶段,有可能在地址栏没有路由参数;跳转回列表页
				uni.navigateTo({
					url: '/pages/list/list'
				})
				return
			}
			//向服务器发起异步请求,获取该商品的详情
			let {
				family,
				product
			} = await productDetails(pid)
			/*************对服务器返回的数据进行处理***************/
			//把所有的 src="img  替换为 src="https://web.codeboy.com/xuezi/img
			product.details = product.details.replace(/src="img/g,`src="${base}img`)
			//2.把所有的 <img 替换为 <img style="width:100%"
			product.details = product.details.replace(/<img/g,'<img style="width:100%"')
			/****************************************************/
			this.family = family
			this.product = product
			//修改页面导航条标题,为当前商品型号名
			uni.setNavigationBarTitle({
				title: this.family.fname
			})
		},
		data() {
			return {
				base: base, //把导入的局部变量
				family: {}, //当前商品所在的"型号/家族/系列"信息
				product: {}, //当前商品信息
				pathList: [
					//当前页面所在的"路径导航"
					{
						title: '首页',
						url: '/pages/index/index',
						openType: 'switchTab'
					},
					{
						title: '品牌馆',
						url: '/pages/brands/brands',
						openType: 'switchTab'
					},
					{
						title: '商品列表',
						url: '/pages/list/list',
						openType: 'navigate'
					},
					{
						title: '商品详情'
					}
				],
				buyCount: 1, //当前商品希望的购买数量
				options: [{
						icon: 'headphones',
						text: '客服'
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 1
					},
				],
				btnGroup: [{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)'
					},
					{
						text: '添加到购物车',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)'
					},
				]
			}
		},
		methods: {
			doOptionsClick({index}) {
				if (index === 0) {
					
				} else if (index === 1) {
					
				}
			},
			async doBtnGroupClick({
				index
			}) {
				if (index === 0) {

				} else if (index === 1) {
					//判断当前用户是否登陆了,如果没登录,跳转到登录页(同时保证登录完毕后,跳转回到当前商品)
					let token = uni.getStorageSync('userToken')
					if(token){//用户已经登录,直接调用"添加到购物车"接口方法
						let data = await cartAdd(this.product.lid,this.buyCount)
						console.log(data)
						if(data.code === 200){
							//购物车添加成功
							this.options[1].info = data.buyCount
						}else{
							//购物车添加失败
						}
					}else{//没登录,跳转到登录页(同时保证登录完成后跳转回当前商品页)
					//把当前页面的地址及请求参数保存在客户端--即"登录原因页"
						uni.setStorageSync('loginReason',this.$route.fullPath)
						uni.switchTab({
							url:'/pages/userCenter/userCenter'
						})
						uni.showToast({
							icon:'error',
							title:'请先登录'
						})
					}
				}
			},
			goToDetails(num) {
				uni.navigateTo({
					url: '/pages/details/details?pid=' + num
				})
			}
		}
	}
</script>

<style lang="scss">
	.f75 {
		height: 60px;
	}

	.f8 {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: 0 0 $uni-shadow-radius-base $uni-border-color;
	}

	.suggest-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

		.suggest {
			align-items: center;
			width: 300rpx;

			image {
				width: 70%;
			}
			text{
				width: 70%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
